import { Component,Suspense,lazy } from "react";
import { Switch,Route,Redirect,HashRouter } from "react-router-dom";
import "./index.less";

let Home = lazy(()=>import("../../components/home/home.jsx"))

class Index extends Component {
  constructor(props) {
    super(props);
  }
  goFun(router){
      this.props.history.push(router)
  }
  render() {
    return (
      <HashRouter>
        <div className="header">
          <div className="home" onClick={this.goFun.bind(this, "/index/home")}>
            首页
          </div>
          <div className="home" onClick={this.goFun.bind(this, "/index/vue")}>
            Vue
          </div>
          <div className="home" onClick={this.goFun.bind(this, "/index/ract")}>
            React
          </div>
          <div className="home" onClick={this.goFun.bind(this, "/index/node")}>
            Node
          </div>
          <div className="home" onClick={this.goFun.bind(this, "/index/about")}>
            关于
          </div>
        </div>
        <div className="view">
            <Suspense>
                <Switch>
                    <Route exact path="/index" render={()=>(<Redirect to="/index/vue"></Redirect>)}></Route>
                    <Route path="/index/vue" component={Home} ></Route>
                </Switch>
            </Suspense>
        </div>
      </HashRouter>
    );
  }
}

export default Index;
